<template>
  <div class="min-h-screen flex flex-col pb-[4rem]">
    <template v-if="globalLoading">
      <CommonLoading />
    </template>

    <template v-if="courseStore.courseData">
      <template v-if="!isStarted">
        <StudyPrepare @start="startStudy" />
      </template>
      <template v-else>
        <StudyTime />
        <studyChoice />
        <StudySumup />
        <studyRatio />
        <StudyBottom />
      </template>
    </template>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: "no-sidebar",
});
import { globalLoading } from "~/composables/common/http";
import { useCourseStore } from "~/stores/course";
import { getContent, updateStudyTime } from "~/composables/study/api";
const isStarted = ref(false);

const startStudy = () => {
  isStarted.value = true;
};
const courseStore = useCourseStore();
const type = useRoute().query.type as string;
courseStore.studyType = type;
async function ladCourseData(id: string) {
  const content = await getContent(id, "choice");
  courseStore.courseData = content;
  updateStudyTime(id);
}
ladCourseData(useRoute().params.id as string);
</script>
